<template>
  <basic-dialog
    :visible="visible"
    :title="'查看附件'"
    :show-footer="false"
    :handle-close="onCancel"
    :handle-opened="queryFileList"
  >
    <div>
      <basic-list
        ref="table"
        :loading="tableLoading"
        showActionCol
        :data-source="qualifieList"
        :columns="columns"
        :show-select-col="false"
        :show-pagination="false"
        :actionRender="actionRender"
      />
    </div>
  </basic-dialog>
</template>
<script>
import { mapActions } from 'vuex';
import BasicDialog from '../BasicDialog';
import BasicList from '../BasicList';
import { getQualificationService, deleteQualificationService } from '@api/sourcing/purchaseDetail'

export default {
  name: 'AttachmentDialog', // 查看附件弹框
  components: {
    BasicDialog,
    BasicList,
  },
  props: ['visible', 'fileGroupId', 'isReadOnly'],
  data () {
    return {
      columns: [
        {
          prop: 'fileName',
          label: '附件名称',
        },
        {
          prop: 'updateTimeStr',
          label: '上传时间',
        },
      ],
      qualifieList: [],
      tableLoading: false
    };
  },
  computed: {
    currentFileGroupId () {
      return this.fileGroupId;
    }
  },
  methods: {
    ...mapActions('sourcing/purchaseDetail', [
      'deleteQualification', // 删除资质
    ]),
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button size="mini" type="text" onClick={() => this.handleDownLoad(row)}>下载</el-button>
          <el-button size="mini" type="text" onClick={() => this.handlePreview(row)}>预览</el-button>
          <el-popconfirm
            style="margin: 5px"
            confirm-button-type="Text"
            title="确定删除该附件？"
            onConfirm={() => this.handleDelete(row)}
          >
            <el-button disabled={ this.isReadOnly } size="mini" type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </div>
      );
    },
    queryFileList () {
      let fileGroupIdList = [];
      if (this.currentFileGroupId && this.currentFileGroupId != 0) {
        if (typeof this.currentFileGroupId == 'string') {
          fileGroupIdList = this.currentFileGroupId.split(',');
        }
        if (typeof this.currentFileGroupId == 'number') {
          fileGroupIdList.push(this.currentFileGroupId)
        }
        if (fileGroupIdList && fileGroupIdList.length) {
          this.tableLoading = true;
          getQualificationService({ fileGroupIds: fileGroupIdList }).then((res) => {
            this.tableLoading = false;
            if (res.code == 0) {
              this.qualifieList = res.data
              this.handleReloadTable()
            }
          }).catch(() => {
            this.tableLoading = false;
          })
        }
      }
    },
    // 获取商品资质
    handleDelete (row) {
      this.tableLoading = true;
      const params = {
        fileUploadId: row.fileUploadId
      }
      deleteQualificationService(params).then((res) => {
        this.tableLoading = false;
        if (res.code == 0) {
          this.$message.success('删除成功')
          this.queryFileList();
        }
      })
    },
    onCancel () {
      this.$emit('update:visible', false);
    },
    handleDownLoad (row) {
      if (!row.downloadUrl) {
        return this.$message.error('文件异常');
      }
      window.location.href = row.downloadUrl
    },
    handlePreview (row) {
      const fileTypes = ['bmp', 'jpg', 'jpeg', 'png'];
      if (!row.previewUrl || !fileTypes.includes(row.fileSuffix)) {
        return this.$message.error('文件/文档格式的附件不支持查看，仅图片格式的文件支持查看。');
      }
      window.open(row.previewUrl);
    },
    handleReloadTable () {
      this.$nextTick(() => {
        this.$refs.table.$refs.plTable.doLayout();
      })
    }
  },
};
</script>
